<template>
  <div class="p-d">
    <div class="b-f p-d">
      <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
      <div class="btnStyle flex-a-c p-t">
        <el-button type="primary" size="small" @click="add" class="m-r-10">新增</el-button>
        <!-- <el-upload ref="uploadRefXls" class="upload-demo m-r-10" action="#" :limit="1" :on-change="handleChangeXls" :auto-upload="false"
          :show-file-list="false" :on-exceed="handleExceedXls" accept=".xls,.xlsx">
          <template #trigger>
            <el-button type="warning" size="small">批量导入</el-button>
          </template>
</el-upload>
<el-button type="warning" size="small" @click="handleDownload">批量导出</el-button> -->
        <el-button type="danger" size="small" @click="dels">批量删除</el-button>
      </div>
      <div class="m-t">
        <TableCompEle class="m-t" ref="multipleTable" height="50vh" :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction"
          :isSelect="true" :isIndex="true" :isShowPage="true" :queryParams="queryParams" @getPagination="getList"
          @handleSelectionChange="handleSelectionChange"></TableCompEle>
      </div>
    </div>
    <AddComp ref="addRef" @close="getList" />
  </div>
</template>

<script>

import {
  getServiceList,
  deleteServiceBatch,
} from '@/api/yqgx/service'
import AddComp from './common/add.vue'
export default {
  components: { AddComp },
  data() {
    return {
      activeName: 'all',
      queryParams: {
        total: 6,
        currentPage: 1,
        pageSize: 10
      },
      tableData: [
        // {
        //   id: '001',
        //   title: '830板材性能测试机',
        //   property: '非科研性质',
        //   contractNum: 'TYU-012-356',
        //   startTime: '2023-01-01',
        //   endTime: '2023-06-01',
        //   content: '板材的弯曲测试培训与测试服务，提供测试数据和报告',
        //   amount: '板材的弯曲测测试耗时约1个月',
        //   money: 100,
        //   companyName: '东莞市明驰光电科技有限公司',
        //   contactName: '张晓明',
        //   contactPhone: '010-8976765'
        // },
        // {
        //   id: '002',
        //   title: '气相质谱联用仪',
        //   property: '非科研性质',
        //   contractNum: 'TTL-001-008',
        //   startTime: '2022-01-01',
        //   endTime: '2023-01-01',
        //   content: '提供挥发性成分分析、农残分析、高效液相分析等测试分析服务。',
        //   amount: '耗时约5个月',
        //   money: 230,
        //   companyName: '中科院气相研究中心',
        //   contactName: '吴美玲',
        //   contactPhone: '010-64323867'
        // },
        // {
        //   id: '003',
        //   title: '低温强磁场扫描隧道显微镜',
        //   property: '科研性质',
        //   contractNum: 'ZUW-009-012',
        //   startTime: '2023-02-01',
        //   endTime: '2023-08-01',
        //   content: '主要用于低维材料的性能检测',
        //   amount: '耗时约12个月',
        //   money: 750,
        //   companyName: '北京大学仪器设备研究所',
        //   contactName: '黄华丽',
        //   contactPhone: '010-12893456'
        // },
        // {
        //   id: '004',
        //   title: 'ZYGO干涉仪',
        //   property: '非科研性质',
        //   contractNum: 'GSY-012-120',
        //   startTime: '2023-06-01',
        //   endTime: '2024-08-01',
        //   content: '测角反射器的PV值、rms值，光束偏离值，二面角夹角等',
        //   amount: '耗时约1个月',
        //   money: 120,
        //   companyName: '北京航天科学研究所',
        //   contactName: '黄华丽',
        //   contactPhone: '010-12893456'
        // },
        // {
        //   id: '005',
        //   title: '低温强磁场扫描隧道显微镜',
        //   property: '科研性质',
        //   contractNum: 'ZUW-009-012',
        //   startTime: '2023-02-01',
        //   endTime: '2023-08-01',
        //   content: '主要用于低维材料的性能检测',
        //   amount: '耗时约12个月',
        //   money: 750,
        //   companyName: '北京大学仪器设备研究所',
        //   contactName: '许伟民',
        //   contactPhone: '13780920837'
        // },
        // {
        //   id: '006',
        //   title: '原位纳米力学系统（纳米压痕仪）',
        //   property: '科研性质',
        //   contractNum: 'LLS-123-122',
        //   startTime: '2024-02-01',
        //   endTime: '2024-09-01',
        //   content: '材料微区表面硬度、弹性模量、表面形貌等力学性能等测试与表征',
        //   amount: '耗时约12个月',
        //   money: 750,
        //   companyName: '北京纳米微电子研究所',
        //   contactName: '王小华',
        //   contactPhone: '13278912345'
        // }
      ],
      tableConfig: [
        {
          prop: 'id',
          label: '服务记录编号'
        },
        {
          prop: 'title',
          label: '共享资源名称'
        },
        {
          prop: 'contractNum',
          label: '服务合同(协议)编号'
        },
        {
          prop: 'startTime',
          label: '服务起始时间'
        },
        {
          prop: 'endTime',
          label: '服务结束时间'
        },
        {
          prop: 'content',
          label: '服务内容'
        },
        {
          prop: 'money',
          label: '服务金额(万元)'
        }
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(170),
        operations: [
          {
            label: '查看',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$refs.addRef.show({
                title: '查看服务记录',
                isLook: 'look',
                data: row
              })
            }
          },
          {
            label: '修改',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$refs.addRef.show({
                title: '修改服务记录',
                isLook: 'edit',
                data: row
              })
            }
          },
          {
            label: '删除',
            isLink: true,
            type: 'danger',
            method: row => {
              this.deleteFun([row.id])
            }
          }
        ]
      },
      queryString: {
        title: '',
        id: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
          this.getList()
        },
        formData: [
          {
            type: 'Input',
            label: '服务编号',
            prop: 'id',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          },
          {
            type: 'Input',
            label: '共享资源名称',
            prop: 'title',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          }
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
            this.getList()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              title: '',
              id: ''
            }
            this.queryParams.currentPage = 1
            this.getList()
          }
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    add() {
      this.$refs.addRef.show({
        title: '新建服务记录',
        isLook: 'add'
      })
    },
    getList() {
      getServiceList(this.queryParams).then(res => {
        this.tableData = res.data
        this.queryParams.total = res.total
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleDownload() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'warning',
          message: '请选择要导出的数据'
        })
        return
      }
      const ids = []
      this.multipleSelection.forEach(items => {
        ids.push(items.id)
      })
      this.downloadFun(ids)
    },
    downloadFun(ids) {
      console.log('%c [ ids ]-272', 'font-size:13px; background:pink; color:#bf2c9f;', ids)
      this.$confirm(`确定要导出吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // downloadMultiple(ids)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    dels() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'warning',
          message: '请选择要删除的数据'
        })
        return
      }
      const ids = []
      this.multipleSelection.forEach(items => {
        ids.push(items.id)
      })
      this.deleteFun(ids)
    },
    deleteFun(ids) {
      console.log(
        '%c [ ids ]-216',
        'font-size:13px; background:pink; color:#bf2c9f;',
        ids
      )
      this.$confirm(`确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteServiceBatch(ids).then(() => {
            this.$refs.multipleTable.clearSelection()
            this.getList()
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // xls
    handleChangeXls(file) {
      const _file = file?.raw ?? file
      const formData = new FormData()
      formData.append('file', _file)
      formData.append('pathType', file.name.split('.').pop())
    },
    // 多次上传覆盖
    handleExceedXls(file) {
      this.$refs.uploadRefXls.clearFiles()
      this.handleChangeXls(file[0])
    }
  }
}
</script>

<style lang="less" scoped></style>